<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addNRoomForm" ref="addNRoomRef" :rules="addNRoomrules">
      <el-form-item label="教室名称" :label-width="formLabelWidth" prop="name">
        <el-input
          v-model="addNRoomForm.name"
          autocomplete="off"
          ref="name"
          placeholder="请填写教室名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
        <el-select placeholder="请选择类型" v-model="addNRoomForm.type">
          <el-option label="教室" :value="1"></el-option>
          <el-option label="大厅" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth" prop="detail" 
      v-if="addNRoomForm.type == 2"
      >
        <el-input
          v-model="addNRoomForm.detail"
          autocomplete="off"
          ref="name"
          placeholder="请填写描述"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="班级名称"
        :label-width="formLabelWidth"
        prop="detail"
        v-if="addNRoomForm.type == 1"
      >
        <el-select
          v-model="addNRoomForm.detail"
          autocomplete="off"
          filterable
          placeholder="请选择班级"
        >
          <el-option
            v-for="item in list"
            :key="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="是否删除" :label-width="formLabelWidth"
                                      prop="isDelete" v-if="addNRoomForm.id">
                            <el-input
                                    v-model="addNRoomForm.isDelete"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否删除"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="校区" :label-width="formLabelWidth"
                                      prop="campus" v-if="addNRoomForm.id">
                            <el-input
                                    v-model="addNRoomForm.campus"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写校区"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="教学楼名称" :label-width="formLabelWidth"
                                      prop="buildingName">
                            <el-input
                                    v-model="addNRoomForm.buildingName"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写教学楼名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="类型" :label-width="formLabelWidth"
                                      prop="type" v-if="addNRoomForm.id">
                            <el-input
                                    v-model="addNRoomForm.type"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写类型"
                            ></el-input>
                        </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddNRoom",
  components: { ElForm, ElMessage },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      list: [],
      personnelType: "",
      addNRoomForm: {
        name: "",
        detail: "",
        isDelete: "",
        campus: "",
        buildingName: "",
        type: 1,
      },
      // 校验规则
      addNRoomrules: {
        name: vxRule(true, null, "blur"),
        detail: vxRule(true, null, "blur"),
        buildingName: vxRule(true, null, "blur"),
        type: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    getClassInfoList() {
      //获取班级名称
      httpService("/javaApi/baseClassInfo/list/1/1000", {}, "get").then(
        (data) => {
          this.list = data.list;
        }
      );
    },
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getNRoomById(id) {
      httpService("/javaApi/nRoom/queryById", { id: id }, "get").then(
        (data) => {
          this.addNRoomForm = data;
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addNRoomForm.id = "";
      this.addNRoomForm.name = "";
      this.addNRoomForm.detail = "";
      this.addNRoomForm.isDelete = "";
      this.addNRoomForm.campus = "";
      this.addNRoomForm.buildingName = "";
      this.addNRoomForm.type = 1;
    },
    save() {
      this.$refs.addNRoomRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("name", this.addNRoomForm.name);
          params.append("detail", this.addNRoomForm.detail);
          //   params.append("isDelete", this.addNRoomForm.isDelete);
          //   params.append("campus", this.addNRoomForm.campus);
          //   params.append("buildingName", this.addNRoomForm.buildingName);
          params.append("type", this.addNRoomForm.type);
          if (this.addNRoomForm.id) {
            params.append("id", this.addNRoomForm.id);
            httpService("/javaApi/nRoom/edit", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("修改成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getNRoomList();
              } else {
                ElMessage.error("修改失败");
              }
            });
          } else {
            httpService("/javaApi/nRoom/add", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("添加成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getNRoomList();
              } else {
                ElMessage.error("添加失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
</style>